<template>
  <div class="home_contain">
    <!--<x-header>-->
      <!--<span>尬聊</span>-->
      <!--<x-icon slot="overwrite-left" type="navicon" size="35"-->
              <!--@click.native="leftMenuClick"-->
              <!--style="fill:#fff;position:relative;top:-8px;left:-3px;"></x-icon>-->
    <!--</x-header>-->
    <Header :show_back="false" title="微信"
            @searchClick="header_search"
            @addClick="header_add"
    ></Header>

    <keep-alive>
      <router-view></router-view>
    </keep-alive>

    <div class="tab">
      <router-link tag="div" class="tab-item" to="/home/chart">
        <div class="tab-link tab-link-1">
          <span>聊天</span>
        </div>
      </router-link>

      <router-link tag="div" class="tab-item" to="/home/contracts">
        <div class="tab-link tab-link-2">
          <span>联系人</span>
        </div>
      </router-link>

      <router-link tag="div" class="tab-item" to="/home/mine">
        <div class="tab-link tab-link-4">
          <span>我的</span>
        </div>
      </router-link>
    </div>

  </div>
</template>

<script>
  import {Tabbar, TabbarItem, XHeader} from 'vux'
  import Header from '../Header.vue'
  export default {
    components: {
      Tabbar,
      TabbarItem,
      XHeader,
      Header
    },
    name: "Home",
    methods: {
      header_search(){
        alert('搜索')
      },
      header_add(){
        alert('添加')
      },
    }
  }
</script>

<style scoped>
  .content {
    background: red;
  }

  .home_contain {
    position: absolute;
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 0px;
  }

  .tab {
    border-top: 1px solid rgba(153, 153, 153, 0.4);;
    height: 50px;
    background-color: #fff;
    display: flex;
    position: fixed;
    bottom: 0px;
    left: 0px;
    right: 0px;
    line-height: 44px;
    font-size: 14px;
  }

  .tab-item {
    flex: 1;
    text-align: center;
  }

  .tab-link {
    position: relative;
    color: #999999;
    height: 50px;
  }

  .tab-link span {
    position: absolute;
    font-size: 14px;
    line-height: 14px;
    height: 14px;
    width: 100%;
    bottom: 6px;
    left: 0px;
  }

  .tab-link-1 {
    background: url("../../assets/tab/微信.png") no-repeat center;
    background-position-y: 6px;
    background-size: 20px 20px;
  }

  .tab-link-2 {
    background: url('../../assets/tab/通讯录.png') no-repeat center 4px;
    background-size: 26px 26px;
  }
  .tab-link-4 {
    background: url('../../assets/tab/我.png') no-repeat center 8px;
    background-size: 16px 16px;
  }

  .router-link-active .tab-link{
    color: #09BB07;
  }
  .router-link-active .tab-link-1{
    background: url('../../assets/tab/微信1.png') no-repeat center 6px;
    background-size: 22px 22px;
  }
  .router-link-active .tab-link-2{
    background: url('../../assets/tab/通讯录1.png') no-repeat center 4px;
    background-size: 28px 28px;
  }
  .router-link-active .tab-link-4{
    background: url('../../assets/tab/我1.png') no-repeat center 8px;
    background-size: 18px 18px;
  }
</style>
